<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>push</title>
	<style type="text/css">
		fieldset{
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<fieldset>
	<legend>**加密**</legend>
	<input type="file" id="encryption_file" />
</fieldset>
<fieldset>
	<legend>**解密**</legend>
	<input type="file" id="solve_file" />
</fieldset>
<fieldset>
	<legend>**URL解密**</legend>
    <input style="width: 100%" id="url" placeholder="image url" value="http://oi7w6xjqt.bkt.clouddn.com/encry_94e743544298464396ab20dadfc2c9f5_th.png" /><button id="solve_btn">解密</button>
</fieldset>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function(){
        operator_file("#solve_file", "solve");
        operator_file("#encryption_file", "encry");
		$("#solve_btn").click(function(){
		    url_solve();
		})
	});
	function url_solve(){
        var url = $("#url").val();
        var request = new XMLHttpRequest();
        request.open("GET", url, true);
        request.responseType = 'blob';
        request.onload = function () {
            var reader = new FileReader();
            reader.readAsArrayBuffer(request.response);
            reader.onload = function (e) {
                var url_arrayBuffer = e.target.result;
                console.log(url_arrayBuffer, url_arrayBuffer.byteLength);
                encry_solve(url_arrayBuffer);
                save_to_file(url_arrayBuffer, "url_solve_1.png");
            };
        };
        request.send();
	}
	function operator_file(file_input_selector, type){
        $(file_input_selector).on("change", function(){
            var file = this.files[0];
            var file_reader = new FileReader();
            file_reader.onload = function(e){
                var start_time = new Date().getTime();
                var arrayBuffer = e.target.result;
                encry_solve(arrayBuffer);
                console.log("trans time ---->" + (new Date().getTime() - start_time));
                save_to_file(arrayBuffer, type+"_"+file.name);
            };
            file_reader.readAsArrayBuffer(file);
        });
	}
	function save_to_file(array_buffer, file_name){

        const link = document.createElement( 'a' );
        link.style.display = 'none';
        document.body.appendChild( link );

        const blob = new Blob([array_buffer]);
        const objectURL = URL.createObjectURL( blob );

        link.href = objectURL;
        link.href = URL.createObjectURL( blob );
        link.download = file_name ;
        link.click();
	}
	function encry_solve(array_buffer){
        var imgByteArr = new Int8Array(array_buffer);
        for(var i=0,len=imgByteArr.byteLength; i < len; i++){
            imgByteArr[i] = imgByteArr[i] ^ 518;
        }
	}
</script>
</body>
</html>

